<script setup>

import router from "@/router/index.js";
</script>

<template>
<div class="container">
  <a @click="router.push({name:'setting'})" style="margin-top: 10px"><img src="../../public/img/AA.png" height="10" width="7"/></a>
    <div class="rw">
    <a href="">任务</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">成就</a>
  </div>
  <br>
  <img src="../../public/img/banner.png" height="150" width="430"/>
  <div class="lv">
    <p><span class="te1">LV.2</span><span class="te2" style="color: #969696">距离升级还需要30 EXP</span>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;
      <span class="te3">50/<span style="color: #8f8f8f">80</span></span></p>
    <br>
    <img class="h1" src="../../public/img/h1.png" height="5" width="430"/>
  </div>
  <div class="laoyh">
    <p>老用户回归一周内，每日任务3倍奖励</p>
  </div>
  <br>
  <div id="xs">
  <div class="xinS">
    <p class="x1">新手任务1/4 -></p>
    <img src="../../public/img/66.png" height="25" width="25"/>
    <p class="x1">完善个人资料信息(0/7)</p>
    <p class="x1">
      <img src="../../public/img/15.png" height="10" width="10"/>+100
      &nbsp;&nbsp;&nbsp;
      <img src="../../public/img/16.png" height="10" width="10"/>+200</p>
        <input type="submit" value="去完成">
  </div>
      &nbsp;&nbsp;&nbsp;
  <div class="xinS2">
    <p class="x1">游戏生涯0/4 -></p>
    <img src="../../public/img/77.png" height="25" width="25"/>
    <p class="x1">绑定Steam账号</p>
    <p class="x1">
      <img src="../../public/img/15.png" height="10" width="10"/>+100
      &nbsp;&nbsp;&nbsp;
      <img src="../../public/img/16.png" height="10" width="10"/>+200</p>
    <input type="submit" value="去完成">
  </div>
  </div>

  <br>
  <hr class="yi">
  <div class="eve">
    <br>
    <h4>每日任务</h4>
    <br>
    <img class="img" src="../../public/img/11.png" height="40" width="40"/>
    <div class="seven">
    <p>签到 <span style="color: grey">(连续7天以上奖励翻倍)</span></p>
    <p>
      <img src="../../public/img/12.png" height="12" width="12"/>+30&nbsp;
      <img src="../../public/img/13.png" height="12" width="12"/>+30&nbsp;
      <img src="../../public/img/14.png" height="12" width="12"/>+1
    </p>
    </div>
    <div class="lift">
      <p>已连续签到</p>
      <h2 style="color: grey">1天</h2>
    </div>
  </div>
  <br>
  <div class="bq">
    <tr>
      <td>我要补签 : </td>
      <td>
        &nbsp;
        <select>
          <option>月份:1</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
          <option>7</option>
          <option>8</option>
          <option>9</option>
          <option>10</option>
          <option>11</option>
          <option>12</option>
        </select>
      </td>
    </tr>
    &nbsp;
    <tr>
      <td>
        <select>
          <option>日期:1</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
          <option>7</option>
          <option>8</option>
          <option>9</option>
          <option>10</option>
          <option>11</option>
          <option>12</option>
          <option>13</option>
          <option>14</option>
          <option>15</option>
          <option>16</option>
          <option>17</option>
          <option>18</option>
          <option>19</option>
          <option>20</option>
          <option>21</option>
          <option>22</option>
          <option>23</option>
          <option>24</option>
          <option>25</option>
          <option>26</option>
          <option>27</option>
          <option>28</option>
          <option>29</option>
          <option>30</option>
          <option>31</option>
          <option></option>
        </select>
      </td>
    </tr>
  </div>
  <br>
  <hr>
  <br>


  <div class="fx">
    <img src="../../public/img/22.png" height="40" width="40"/>
    <div class="pt">
    <h4>分享任意帖子到社交平台</h4>
    <p>
      <img src="../../public/img/111.png" height="15" width="15"/>+300
      <img src="../../public/img/88.png" height="12" width="12"/>+300
      <img src="../../public/img/99.png" height="15" width="15"/>+1
    </p>
      <div class="bt">
          <button class="btn btn-info"><a href=""><p style="color: white">去完成</p></a></button>
      </div>
    </div>
  </div>
  <br>
  <hr>
  <br>


  <div class="fx">
    <img src="../../public/img/33.png" height="40" width="40"/>
    <div class="pt">
      <h4>分享游戏详情到社交平台</h4>
      <p><img src="../../public/img/111.png" height="15" width="15"/>+30</p>
      <div class="bt">
          <button class="btn btn-info"><a href=""><p style="color: white">去完成</p></a></button>
      </div>
    </div>
  </div>
  <br>
  <hr>
  <br>


  <div class="fx">
  <img src="../../public/img/44.png" height="40" width="40"/>
  <div class="pt">
  <h4>分享游戏评价到社交平台</h4>
    <p><img src="../../public/img/111.png" height="15" width="15"/>+30</p>
    <div class="bt">
      <button class="btn btn-info"><a href=""><p style="color: #f8f8f8">去完成</p></a></button>
    </div>
  </div>
</div>
  <br>
  <hr class="yi">
  <br>
  <div class="time">
    <h4>限时任务</h4>
    <br>
    <div class="fx">
      <img src="../../public/img/55.png" height="40" width="40"/>
      <div class="pt">
      <h4>前往游戏榜单并停留10S</h4>
      <p>
        <img src="../../public/img/111.png" height="15" width="15"/>+20
        <img src="../../public/img/99.png" height="15" width="15"/>+20
      </p>
        <div class="bt">
            <button class="btn btn-info" style="background: linear-gradient(45deg,#fb9e02, #f38142);"><a href=""><p style="color: white">去完成</p></a></button>
        </div>
      </div>
      <p class="day">6天后结束</p>
      </div>
  </div>
  <br>
  <hr>
  <br>


  <div class="fx">
    <img src="../../public/img/888.png" height="40" width="40"/>
    <div class="pt">
      <h4>下载并登录黑盒语音PC端</h4>
      <p>
        <img src="../../public/img/99.png" height="15" width="15"/>+500
      </p>
      <div class="bt">
        <button class="btn btn-info" style="background: linear-gradient(45deg,#f38142 ,#fb9e02);"><a href=""><p style="color: white">去完成</p></a></button>
      </div>
    </div>
    <p class="day">11天后结束</p>
  </div>
  <a href="" class="ji">任务规则及说明</a>
</div>

</template>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.ji{
  margin-left: 150px;
  color: gray;
  font-size: 15px;
}
.rw{
  margin-left: 170px;
  margin-top: -25px;
}
a{
  color: black;
  font-size: 15px;
  text-align: center;
}
.lv{
  width: 430px;
  height: 50px;
  color: white;
  background-color: #3e3e3e;
  text-align: center;
  margin-top: -6px;
}
.laoyh{
  width: 430px;
  height: 25px;
  color: white;
  background-color:dodgerblue;
  font-size: 14px;
  text-align: center;
}
.xinS{
  width:210px;
  height:136px;
  background: linear-gradient(45deg, #fb9e02, #f38142);
  border-radius: 8px;
  text-align: center;
  margin-top: -10px;
}
.xinS2{
  width:208px;
  height:136px;
  background: linear-gradient(45deg,#f38142 ,#fb9e02);
  border-radius: 8px;
  text-align: center;
  margin-top: -10px;
}
#xs{
  display: flex;
  color: white;
}
.x1{
  font-size: 15px;
}
.lift{
  margin-left: 350px;
  margin-top: -40px;
  width: 80px;
  height: 60px;
  background-color: #f9f9f9;
  border-radius: 5px;
  text-align: center;
}
.bq{
  align-items: center;
  background-color: #f5f6f8;
  width: 430px;
  height: 25px;
  border-radius: 5px;
}
button{
  background-color: black;
  border-radius: 5px;
  width: 70px;
  height: 35px;
}
.bt{
  margin-top: -25px;
}
.h1{
  display: flex;
  border-radius: 5px;
  width: 400px;
  margin-left: 15px;
  margin-top: -15px;
}
button{
  margin-left: 375px;
  align-items: center;
  border:0px solid;
}
.btn{
  margin-left: 315px;
  margin-top: -20px;
}
.seven{
  margin-left: 45px;
  margin-top: -50px;
}
.pt{
  margin-left: 45px;
  margin-top: -50px;
}
input{
  width: 50px;
  height: 25px;
  font-size: 15px;
  margin-top: -20px;
  color: white;
  background-color: sandybrown;
  border: 1px solid sandybrown;
  border-radius: 3px;
}
img{
  margin-top: 5px;
}
hr{
  width: 430px;
  border: 1px solid #f5f6f8;
}
.yi{
  width: 430px;
  border: 2px solid #f5f6f8;
}
.day{
  color: orange;
  font-size: 10px;
  margin-left: 371px;
}
</style>